<template>
  <div>
    <!-- 搜索条 -->
    <div class="search">
      <div class="search-item">
        <icon type="search"/>
        <span>搜索</span>
      </div>
    </div>
    <!-- 轮播图 -->
    <swiper indicator-dots=true>
      <swiper-item :key="index" v-for="(item , index) in swiperData">
        <image :src="item.image_src"></image>
      </swiper-item>
    </swiper>
    <!-- 菜单 -->
    <div class="menu">
      <div class="menu-item" :key="index" v-for="(item , index) in menuData">
        <image :src="item.image_src"></image>
      </div>
    </div>
    <!-- 商品列表 -->
    <div class="floor" :key="index" v-for="(item,index) in floorData">
      <div class="floor-title">
        <img :src="item.floor_title.image_src" alt="">
      </div>
      <div class="floor-content">
        <div class="left">
          <img :src="item.product_list[0].image_src" alt="">
        </div>
        <div class="right">
          <img v-if="i>0" :key="i" v-for="(img,i) in item.product_list" :src="img.image_src" alt="">
        </div>
      </div>
    </div>
    <!-- 回到顶部 -->
    <div class="top" @click="toTopHandle" v-show="flag">
      ∧
      <p>顶部</p>
    </div>
  </div>
</template>
<script>
import request from '../../utils/request.js'
export default {
  data () {
    return {
      swiperData:[],
      menuData:[],
      floorData:[],
      flag:false
    }
  },
  methods:{
    async initData(){
      // 轮播图数据
      let swiperRes = await request('home/swiperdata')
      this.swiperData = swiperRes.data.message
      // 菜单数据
      let menuRes = await request('home/catitems')
      // console.log(menuRes)
      this.menuData = menuRes.data.message
      // 商品列表数据
      let floorRes = await request('home/floordata')
      // console.log(floorRes)
      this.floorData = floorRes.data.message
    },
    toTopHandle (){
      mpvue.pageScrollTo({
        scrollTop:0
      })
    }
  },
  created(){
    this.initData()
  },
  onPullDownRefresh () {
    // 下拉刷新，重新加载页面的数据
    this.initData()
  },
  
  onPageScroll(event) {
    this.flag = event.scrollTop >50
  }
}
</script>
<style scope>
  .search {
    background-color: #eb4450;
    padding: 20rpx;
    text-align: center;
  }
  .search-item {
    background-color: #fff;
  }
  .search-item icon{
    vertical-align: middle;
  }
  .menu {
    display: flex;
  }
  .menu .menu-item {
    flex: 1;
  }
  .menu .menu-item image {
    width: 180rpx;
    height: 160rpx;
  }
  swiper image {
    width: 750rpx;
  }
  .floor-title img {
    width: 750rpx;
    height: 80rpx;
  }
  .floor-content {
    display: flex;
  }
  .left img{
    width: 232rpx;
    height: 385rpx;
  }
  .right {
    flex: 1;
    flex-wrap: wrap;
  }
  .right img {
    width: 232rpx;
    height: 188rpx;
    padding: 0 10rpx;
  }
  .top {
    width: 100rpx;
    height: 100rpx;
    background-color: #fff;
    position: fixed;
    bottom: 50rpx;
    right: 50rpx;
    border-radius: 50%;
    font-size: 14px;
    text-align: center;
  }
</style>